<template>
  <div class="top_box">
    <!-- 顶部 -->
    <div class="top-con">
      <a class="top-left" href="/">
        <img src="https://static.dzyxzx.cn/jkbpc/logo.jpg" alt="">
      </a>
      <div class="top-right">
        <div class="con-left">
          <el-input placeholder="请输入搜索的课程内容" v-model="input1" class="input-with-select">
            <template #prepend>
              <el-select v-model="select" placeholder="课程" style="width: 115px">
                <el-option label="课程" value="1" />
                <!-- <el-option label="题库" value="2" /> -->
              </el-select>
            </template>
            <template #append>
              <a :href="searchPath" style="color: #fff;">
                <el-button>搜索</el-button>
              </a>
            </template>
          </el-input>
        </div>
        <div class="con-right">
          <div class="con-right-qrcode">
            <span class="qrcode-text">访问小程序</span>
            <el-image class="qrcode-image" src="https://api.jkb100.com/api/wx/qrcode.jpg" />
          </div>
          <div class="shu">|</div>
          <el-dropdown v-if="userVisible">
            <div>
              <span style="font-size: 16px;">{{ userBaseInfo.nickName || '未知用户' }}</span>
              <el-image :src="userBaseInfo.profilesPic || 'https://static.dzyxzx.cn/jkbpc/user.png'"
                style="width: 36px; height: 36px; border-radius: 50%;"></el-image>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="mechanismFlag">
                  <a href="/admin">机构管理</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="/userCenter">个人中心</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="/setPassword">修改密码</a>
                </el-dropdown-item>
                <el-dropdown-item @click="loginOut">
                  <a>退出登录</a>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <a href="/login" v-else>
            <span>登录/注册</span>
            <img src="https://static.dzyxzx.cn/jkbpc/user.png" style="width: 36px; height: 36px;" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="main_center">
      <div class="main_center_left">
        <UserMenu :active="menuActive"></UserMenu>
      </div>
      <div class="main_center_right">
        <slot />
      </div>
    </div>
  </div>
  <div class="footer_box">
    <div class="box_up">
      <div class="footer_box1">
        <div class="title">技考邦</div>
        <p>
          &emsp;&emsp;技考邦在线技考学习平台为达州市元翔教育管理有限责任公司打造,深耕国内特种作业教培领域。技考邦致力安全生产和特种作业在线教育领域，成为越来越多的培训机构首选网络教学平台解决方案。
        </p>
      </div>
      <div class="footer_box2">
        <div class="title_r">条款与声明</div>
        <div class="p_box">
          <a href="/website_statement">网站声明</a>
        </div>
        <div class="p_box">
          <a href="/privacy_policy">隐私政策</a>
        </div>
        <div class="p_box">
          <a href="/user_agreement">用户协议</a>
        </div>
      </div>
      <div class="footer_box3">
        <div class="title_r">服务内容</div>
        <div class="p_box">
          <a href="/curriculum">课程中心</a>
        </div>
        <div class="p_box">
          <a href="/exercises">题库中心</a>
        </div>
        <div class="p_box">
          <a href="/mechanism">机构入驻</a>
        </div>
      </div>
      <div class="footer_box4">
        <div class="title_r">联系我们</div>
        <div class="p_box0">
          <img src="https://static.dzyxzx.cn/jkbpc/phone.png" alt="">
          客服热线： 0818-2282222
        </div>
        <div class="p_box0">
          <img src="https://static.dzyxzx.cn/jkbpc/url.png" alt="">
          网址：<a href="/">www.jkb100.com</a>
        </div>
        <div class="p_box0 address_box">
          <img src="https://static.dzyxzx.cn/jkbpc/site.png" alt="">
          <div class="address">地址：四川省达州市通川区金龙大道139号</div>
        </div>
      </div>
    </div>
    <div class="box_down">
      版权所有：Copyright @copy; 2024 技考邦, All Rights Reserved&emsp;&emsp;
      <a href="https://beian.miit.gov.cn/" target="_bank">备案号：蜀ICP备2024084661号-1</a>
    </div>
  </div>
</template>

<script setup>
defineProps({
  menuActive: {
    type: String,
    default: "",
  },
});
import { loginOutApi } from '~/server/api.js'
// import { useToken } from '~/store/token'
import { useToken, useUserinfo, useRecord100 } from '~/store'
const { delToken } = useToken()
const { userinfo, delUserinfo } = useUserinfo()
const { record100 } = useRecord100()
const input1 = ref('')
const select = ref('')
const router = useRouter()
const route = useRoute()
const mechanismFlag = ref(route.meta.mechanism && route.meta.mechanism.auditStatus == 1 ? true : false)
const userBaseInfo = ref(route.meta.userinfo || {})
const userVisible = ref(Object.keys(userBaseInfo.value).length > 0 ? true : false)
const searchPath = ref('')
// 课程搜索框赋值
if (useRoute().query.search && useRoute().query.search != '') {
  input1.value = useRoute().query.search
}
// 监听课程搜索输入框
watch(input1, (nVal, oVal) => {
  if (/^\/curriculum(.*?)/.test(useRoute().path)) {
    searchPath.value = nVal ? `?search=${nVal}` : useRoute().path;
  } else {
    searchPath.value = `/curriculum?search=${nVal}`
  }
})
//退出登录
const loginOut = async () => {
  await useServerRequest(loginOutApi, {
    method: 'get'
  }).then(res => {
    if (res.errno === 0) {
      localStorage.clear()
      useToken().token = '';
      // delToken()
      delUserinfo()
      window.location.href = '/login';
      return false
    }
  })
}
onMounted(() => {
  if (record100) {
    useToken().token = '';
    // delToken()
    delUserinfo()
    userBaseInfo.value = {};
    userVisible.value = false;
  }
})
</script>

<style lang="less">
.con-left {
  .el-input-group--prepend {
    width: 545px;
    height: 38px;
    border-radius: 5px;
    border: 1px solid #FF3F29;
  }

  .el-input-group__prepend {
    background: none;
    border: none;
    height: 38px;
    width: 90px;
    padding: 0;
    box-shadow: none;

    .el-select {
      height: 38px;
      margin: 0;
      border: none;
    }

    .el-select__wrapper {
      border: none;
      box-shadow: none;
      padding: 0 11px;
      padding: 0 12px;
      height: 38px;
    }

  }

  .el-input__wrapper {
    border: none;
    box-shadow: none;
  }

  .el-input__inner {
    border: none;
    box-shadow: none;
  }

  .el-input-group__append {
    color: #fff;
    background-color: #FF3F29;
    border: none;
    box-shadow: none;
  }

  .el-button {
    border: none;
  }
}
</style>
<style lang="less" scoped>
.top_box {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .top-con {
    width: 1200px;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .top-left {

      >img {
        width: 125px;
        height: 30px;
      }
    }

    .top-right {
      width: 910px;
      height: 65px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .con-left {
        width: 545px;
        height: 38px;
        border-radius: 5px;
        display: flex;
      }

      .con-right {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          padding: 0 10px;
          color: #000;
          cursor: pointer;

          &:hover {
            color: #FF3F29;
          }
        }

        &-qrcode {
          position: relative;

          .qrcode-image {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            z-index: 99;
            transform: translateX(-50%);
            margin-top: 20px;
            width: 140px;
            height: 140px;
            box-sizing: content-box;
            box-shadow: 0 0 10px #e0e0e0;
          }

          &:hover {
            .qrcode-image {
              display: block;
            }
          }
        }

        div {
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &:hover {
            color: #FF3F29;
          }
        }

        a {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .shu {
          margin-top: -2px;
        }

        img {
          cursor: pointer;
        }
      }
    }
  }
}

.outer_box {

  >ul {

    >li {
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #FF3F29;
      }
    }
  }
}

.user_img {
  border-radius: 50%;
}

.main {
  background-color: #f9f9f9;
  padding: 20px 0;
  min-height: calc(100vh - 375px);

  &_center {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    align-items: flex-start;

    &_left {
      margin-right: 20px;
    }

    &_right {
      flex: 1 0;
      overflow: hidden;
    }
  }

  .main_center_right {
    width: 930px;
    min-height: 460px;
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #EEE;
  }
}

.footer_box {
  width: 100%;
  height: 310px;
  background: #1F2833;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.box_up {
  width: 1200px;
  height: 187px;
  color: #fff;
  font-size: 14px;
  margin-top: 43px;
  display: flex;
  justify-content: space-between;

  .footer_box1 {
    width: 384px;
  }

  .footer_box2 {
    width: 100px;
  }

  .footer_box3 {
    width: 81px;
  }

  .footer_box4 {
    width: 294px;
  }

  .title {
    font-size: 26px;
    margin-bottom: 28px;
  }

  .title_r {
    font-size: 20px;
    margin-bottom: 30px;
    font-weight: bold;
  }

  .p_box {
    margin-top: 18px;
    cursor: pointer;

    &:hover {
      color: #FF3F29;
    }
  }

  .p_box0 {
    margin-top: 18px;
  }

  .address_box {
    display: flex;
    align-items: flex-start;
  }

  a {
    color: white;

    &:hover {
      color: #FF3F29;
    }
  }
}

.box_down {
  width: 100%;
  height: 79px;
  border-top: 1px solid #656A80;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
}
</style>
